<template>
  <div class="home-hot-goods-list">
    <van-cell-group>
      <van-cell title="人气推荐" is-link value="更多人气推荐" />
    </van-cell-group>
    <div class="goods-list" v-for="item in hotGoodsList" :key="item.id">
      <div class="goods-item" @click="store.goToGoods(item.id)">
        <div class="goods-img">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="goods-info">
          <div class="desc">
            <p>{{ item.name }}</p>
            <p>{{ item.brief }}</p>
          </div>
          <div class="price">
            <p>
              ¥{{ item.counterPrice }}<span>¥{{ item.retailPrice }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useCounterStore } from "@/stores/counter";

const store = useCounterStore();

const props = defineProps({
  hotGoodsList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
.goods-list {
  // 清除默认列表样式（如果是 ul/ol 可加，div 可省略）
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: white;
}

.goods-item {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid #eee; /* 可选：加底部分割线 */
  // 让图片和文字区域分开
  > div {
    box-sizing: border-box;
  }
}

.goods-img {
  width: 180px; /* 图片宽度，根据实际需求调整 */
  height: 180px;
  flex-shrink: 0; /* 防止图片压缩 */
  margin-right: 12px;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例，适应容器 */
  }
}

.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1; /* 让信息区域占满剩余空间 */

  .desc {
    margin: 20px 0 20px;
    p {
      margin: 0 0 4px 0;
      line-height: 1.4;
      // 第一行名称可以加粗
      &:first-child {
        font-weight: 500;
        font-size: 34px;
      }
      // 第二行描述
      &:last-child {
        font-size: 28px;
        color: #666;
      }
    }
  }

  .price {
    p {
      margin: 0;
      font-size: 32px;
      color: #e60012; /* 价格红色 */

      span {
        font-size: 20px;
        color: #999;
        text-decoration: line-through; /* 原价加删除线 */
        margin-left: 4px;
      }
    }
  }
}
</style>
